<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <HmHeader @add="add"></HmHeader>
    <!-- 主体部分 -->
    <HmMain :list="list" @del="del" @moreChange="moreChange"></HmMain>
    <!-- 底部部分 -->
    <HmFooter :list="list" @clear="clear"></HmFooter>
  </section>
</template>

<script>
import HmHeader from "./components/hm-header";
import HmMain from "./components/hm-main";
import HmFooter from "./components/hm-footer";
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter,
  },
  data() {
    return {
      list: [
        { id: 1, name: "唱歌", flag: true },
        { id: 2, name: "跳舞", flag: false },
        { id: 3, name: "泡澡", flag: true },
      ],
    };
  },
  methods: {
    // 删除功能
    del(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id);
    },
    // 状态栏修改
    moreChange(e, id) {
      // console.log(e,id);
      const newObj = this.list.find((item) => item.id === id);
      // console.log(newObj);
      newObj.flag = e.target.checked;
    },
    // 任务栏添加
    add(name) {
      // console.log(name);
      if (name === "") return alert("不能输入空噢");
      this.list.unshift({
        id: +new Date(),
        name,
        flag: false,
      });
    },
    // 清空已完成
    clear() {
      this.list = this.list.filter((item) => item.flag === false);
    },
  },
};
</script>

<style></style>
